<template>
  <div class='page-pagination'>
  	<ul class="pagination" >
        <li v-show="rankpages.current != 1" @click="rankpages.current-- && goto(rankpages.current--)" ><a href="#"><</a></li>
        <li v-for="index in pages" @click="goto(index)" :class="{'active':rankpages.current == index}" :key="index">
          <a href="#" >{{index}}</a>
        </li>
        <li v-show="rankpages.allpage != rankpages.current && rankpages.allpage != 0 " @click="rankpages.current++ && goto(rankpages.current++)"><a href="#" >></a></li>
    </ul>
  	<common ref='common'></common>
  </div>
</template>

<script>
import common from '../common'
export default {
	components: {
		common
	},
  props: {
    rankpages: {
      type: Object
    },
    ranktype: {
      type: Object
    }
  },
  mounted() {
  },
	computed: {
		pages() {
			let pag = []
      if( this.rankpages.current < this.rankpages.showItem ){ //如果当前的激活的项 小于要显示的条数
         //总页数和要显示的条数那个大就显示多少条
         var i = Math.min(this.rankpages.showItem,this.rankpages.allpage)
         while(i){
             pag.unshift(i--)
         }
      }else{ //当前页数大于显示页数了
         var middle = this.rankpages.current - Math.floor(this.rankpages.showItem / 2 ),//从哪里开始
             i = this.rankpages.showItem;
         if( middle >  (this.rankpages.allpage - this.rankpages.showItem)  ){
             middle = (this.rankpages.allpage - this.rankpages.showItem) + 1
         }
         while(i--){
             pag.push( middle++ )
         }
      }
      return pag
		}
	},
	methods: {
		goto(index){
      if(index == this.rankpages.current) 
    		return
      this.rankpages.current = index
      let type = this.ranktype.name
      switch(type) {
        case '降水': type = 'water'; break;
        case '温度': type = 'temp'; break;
        case '风': type = 'wind'; break;
        case '能见度': type = 'visi'; break;
      }
      let chooseType = this.ranktype.choosenum
      if(chooseType !== 5&&chooseType !==10 && chooseType != 20){
        chooseType = abovefree
      }else{
        chooseType = 'above' + chooseType
      }
      this.$emit('page-change', index, type, chooseType)
    }
	}
}
</script>

<style lang="less">
.pagination {
position: relative;
}
.pagination li{
display: inline-block;
margin:0 5px;
}
.pagination li a{
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
display:inline-block;
border:1px solid #ddd;
background:#fff;
color:#264984;
}
.pagination li a:hover{
background:#eee;
}
.pagination li.active a{
background:#344478;
color:#fff;
}
</style>
